<!DOCTYPE html>
<html lang="en">
<script>

</script>
<head>
    <meta charset="UTF-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: '成都新房数量-价格-地段数据（2021）',
            subtext: '房源数据来自链家',
        },
        dataset: {
            source: [
                ['count', 'price', 'location'],
                [151,22379,'成华'],
                [129,27094,'高新'],
                [122,13345,'新都'],
                [120,17456,'郫都'],
                [114,16280,'双流'],
                [104,16743,'龙泉驿'],
                [97,14288,'温江'],
                [91,22143,'天府新区'],
                [73,25345,'金牛'],
                [71,31800,'锦江'],
                [63,24276,'武侯'],
                [48,24182,'青羊'],
                [46,11187,'新津'],
                [43,12472,'都江堰'],
                [43,9355,'青白江'],
                [35,10091,'崇州'],
                [34,11300,'仁寿县'],
                [27,9818,'大邑'],
                [26,7993,'金堂'],
                [25,7374,'彭州'],
                [25,11958,'简阳'],
                [21,13604,'天府新区南区'],
                [17,8477,'彭山区'],
                [17,8405,'东坡区'],
                [15,6293,'市中区'],
                [15,8145,'高坪区'],
                [12,9062,'顺庆区'],
                [12,8999,'峨眉山市'],
                [11,7281,'嘉陵区'],
                [6,9896,'高新西'],
                [6,8600,'蒲江'],
                [4,10241,'邛崃'],
                [4,4900,'沙湾区'],
                [1,16000,'游仙区'],
                [1,3600,'西充县'],
                [1,6300,'雁江区'],
                [1,4200,'井研县'],
                [1,7700,'涪城区']

            ]
        },
        grid: {containLabel: true},
        xAxis: {name: 'price'},
        yAxis: {type: 'category'},

        visualMap: {
            orient: 'horizontal',
            left: 'center',
            min: 10,
            max: 100,
            text: ['High count', 'Low count'],
            // Map the score column to color
            dimension: 0,
            inRange: {
                color: ['#cb9bff','#3cb9fc','#87e885','#fae768','#ffc076','#fa8080',]
            }
        },
        series: [
            {
                type: 'bar',
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'price',
                    // Map the "product" column to Y axis
                    y: 'location'
                }
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


</body>
</html>